<template>
	<view class="search">
		<view class="search_box">
			<view class="search_box_left" @click="back"  v-if="showBack"><uni-icons type="back" size="26"></uni-icons></view>
			<view class="search_box_right"><uni-easyinput prefixIcon="search" v-model="keyword" :placeholder="words" @input="inputVal" @focus="focus"></uni-easyinput></view>
		</view>
		
		<view class="search_suggest_box" v-show="showSearchSuggestBox">
			<uni-section :title="searchTitle" type="line" class="uni-section1">
				<view class="search_suggest_box_item" v-for="(item, index) in suggestList" :key="index" @click="choose(item.keyword)">
					<view class="iconfont icon-sousuo_o font_18"></view>
					<view>{{item.keyword}}</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {suggest} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		name:"u-search-input",
		props: {
			showBack: {
				type: Boolean,
				default: true
			},
			
			action: {
				type: Boolean,
				default: false
			},
			
			jumpType:{
				type: String,
				default: ''
			},
			
			jumpUrl: {
				type: String,
				default: ''
			},
			
			words: {
				type: String,
				default: ''
			}
		},
		
		data() {
			return {
				keyword: '',
				searchTitle: '',
				showSearchSuggestBox: false,
				suggestList: [],
			};
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			inputVal(e){
				this.keyword = e;
			},
			
			focus(){
				if(this.action){
					util.jump(this.jumpType, this.jumpUrl);	
				}
			},
			
			choose(e){
				util.jump('navigateTo', '/pages/search/searchResult?keyword=' + e);
			},
			
			suggest(keyword){
				suggest({keyword: keyword}).then(data => {
					let result = data.result.allMatch;
					let itemArr = [];
					result.forEach(val => {
						let itemObj = {};
						itemObj['keyword'] = val.keyword;
						itemArr.push(itemObj);
					});
					
					this.suggestList = itemArr;
				})
			},
		},
		
		watch:{
			keyword(newVal){
				if(newVal.length){
					this.showSearchSuggestBox = true;
					this.searchTitle = "搜索" +' "'+ this.keyword +'"';
					this.suggest(this.keyword);
				}
				else{
					this.showSearchSuggestBox = false;
					this.searchTitle = '';
				}
					
			}
		}
	}
</script>

<style scoped>
	.search{
		width: 100%;
		height: 50px;
	}
	
	.search_box{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
		position: fixed;
		left: 0;
		z-index: 9;
	}
	
	.search_box .search_box_left{
		width: 10%;
		text-align: center;
		line-height: 50px;
	}
	
	.search_box .search_box_right{
		width: 100%;
		height: 30px;
	}
	
	/*  #ifdef MP-WEIXIN */
	.search_box .search_box_right{		
		margin-top: 5px;
	}
	/*  #endif  */
	
	/deep/.uni-easyinput{
		width: 90%;
		margin: 0 auto;
		top: 50%;
		transform: translate(0px, -5px);
	}

	/deep/.is-input-border{
		border-radius: 20px;
	}
	
	/deep/.uni-easyinput__content-input{
		height: 30px;
	}
	
	.search_suggest_box{
		width: 80%;
		margin: 0 auto;
		position: absolute;
		left: 50%;
		top: 7%;
		transform: translate(-133px, 0px);
		z-index: 9;
	}
	
	/*  #ifdef MP-WEIXIN */
	.search_suggest_box{
		width: 69%;
		left: 50%;
		top: 8%;
		transform: translate(-163px, 0px);
	}
	/*  #endif  */
	
	.uni-section1{
		border: 1px solid #ccc;
		border-radius: 6px;
	}
	
	.search_suggest_box .search_suggest_box_item{
		display: flex;
		align-items: center;
		font-size: 13px;
		padding: 0 10px;
	}
	
	.search_suggest_box .search_suggest_box_item view{
		padding: 10px 0;
	}
</style>